<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=VqX1tpLOoCQRnVKr2cim2AK1ESUaNGgY"></script>
    <title>主页</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("allmap");
    //模拟后台数据库返回数据，包含点位坐标及点位ID
    // var points = [
    //     { "lng": 121.1100, "lat": 30.2402, "id": 1 },
    //     { "lng": 121.1101, "lat": 30.2402, "id": 2 },
    //     { "lng": 121.1102, "lat": 30.2402, "id": 3 },
    //     { "lng": 121.1103, "lat": 30.2402, "id": 4 },
    //     { "lng": 121.1104, "lat": 30.2402, "id": 5 },
    //     { "lng": 121.1105, "lat": 30.2402, "id": 6 },
    //     { "lng": 121.1106, "lat": 30.2402, "id": 7 },
    //     { "lng": 121.1107, "lat": 30.2402, "id": 8 },
    // ];

    //模拟后台数据库返回数据，包含点位坐标及点位ID
    var points = [];
    var id = 1;
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            points.push({ "lng": 121.1100 + j * 0.0001, "lat": 30.2400 - i * 0.0001, "id": id });
            id++;
        }
    }

    //循环添加标签及信息窗口
    for (var i = 0; i < points.length; i++) {
        let targetPoint = new BMapGL.Point(points[i].lng, points[i].lat); //定义坐标点，代表点位位置及label显示的位置
        //
        let label = new BMapGL.Label(points[i].id, {
            offset: new BMapGL.Size(-20, -10), //label的偏移量，为了让label的中心显示在点上
            position: targetPoint  //label的位置
        });
        //给label设置样式
        label.setStyle({
            color: "red",
            maxWidth: "none",
            fontSize: "12px", //字体大小
            height: "20px",
            width: "30px",
            lineHeight: "20px",
            textAlign: "center", //文本居中
            fontFamily: "微软雅黑"
        });
        //将label添加到地图
        map.addOverlay(label);
        //设置信息窗口样式
        let opts = {
            width: 240,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: '点位ID:' + points[i].id, // 信息窗口标题
            message: '设备信息'
        };
        //设置信息窗口内容
        let msg_info = "可在此处添加需要显示的信息，如：点位ID: " + points[i].id
            + '<br/>'
            + "<a href='#' onclick='map.centerAndZoom(new BMapGL.Point(" + points[i].lng + "," + points[i].lat + "), 15); '>改变缩放</a>"
            + '<br/>'
            + "<a href='#' onclick=\"window.location.href='Plotly折线图.html?id=" + points[i].id + "'\">查看历史曲线</a>";
        let infoWindow = new BMapGL.InfoWindow(msg_info, opts);  // 创建信息窗口对象

        //label添加点击事件
        label.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, targetPoint); //开启信息窗口
        });
    }

    // //循环添加标记点及信息窗口
    // for (var i = 0; i < points.length; i++) {
    //     let targetPoint = new BMapGL.Point(points[i].lng, points[i].lat); //定义坐标点
    //     let markerTarget = new BMapGL.Marker(targetPoint); // 创建点标记
    //     map.addOverlay(markerTarget); // 在地图上添加点标记

    //     let opts = {
    //         width: 240,     // 信息窗口宽度
    //         height: 100,     // 信息窗口高度
    //         title: '点位ID:' + points[i].id, // 信息窗口标题
    //         message: '设备信息'
    //     };
    //     let msg_info = "可在此处添加需要显示的信息，如：点位ID: " + points[i].id
    //         + '<br/>'
    //         + "<a href='#' onclick='map.centerAndZoom(new BMapGL.Point(" + points[i].lng + "," + points[i].lat + "), 15); '>改变缩放</a>"
    //         + '<br/>'
    //         + "<a href='#' onclick=\"" + "window.location.href='折线图.html'" + "\">查看历史曲线</a>";
    //     let infoWindow = new BMapGL.InfoWindow(msg_info, opts);  // 创建信息窗口对象

    //     // 点标记添加点击事件
    //     markerTarget.addEventListener("click", function () {
    //         map.openInfoWindow(infoWindow, targetPoint); //开启信息窗口
    //     });
    // }

    //获得两个坐标连线的中间坐标,可用于初始化地图时设置中心点坐标
    var pointArr = [new BMapGL.Point(points[0].lng, points[0].lat), new BMapGL.Point(points[points.length - 1].lng, points[points.length - 1].lat)];
    function getcenterpoiont() {
        var lng1 = parseFloat(pointArr[0].lng);
        var lat1 = parseFloat(pointArr[0].lat);

        var lng2 = parseFloat(pointArr[1].lng);
        var lat2 = parseFloat(pointArr[1].lat);

        var lngca = (Math.max(lng1, lng2) - Math.min(lng1, lng2)) / 2;
        var latca = (Math.max(lat1, lat2) - Math.min(lat1, lat2)) / 2;

        var lngcenter = Math.min(lng1, lng2) + lngca;
        var latcenter = Math.min(lat1, lat2) + latca;

        var pointcenter = new BMapGL.Point(lngcenter, latcenter);
        return pointcenter;
    }
    var centerPoint = getcenterpoiont();
    //var centerPoint = new BMapGL.Point(121.1100, 30.2402); //也可以直接设置中心点坐标
    map.centerAndZoom(centerPoint, 20);   // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //map.setHeading(60);   //设置地图旋转角度
        //map.setTilt(0);       //设置地图的倾斜角度
</script>